adsense link 728px X 15px

Showing posts with label Blog Tutorial. Show all posts
Showing posts with label Blog Tutorial. Show all posts
Friday, August 6, 2010, 

navigasi breadcrumbs
Mungkin sudah tidak asing lagi bagi anda dengan navigasi breadcrumbs ini. Dan saya fikir anda semua tentu sudah tahu tentang cara pembuatannya. Namun dikarenakan ada teman blogger yang mempertanyakan tentang bagaimana cara membuatnya maka tidak ada salahnya jika saya kembali mengulang. ^^, Terima kasih mas Rendi Indra Jaya telah meninggalkan pertanyaan di sini.

Mengenai langkah pembuatannya silakan anda ikuti langkah-langkah di bawah ini.

  1. Login seperti biasa ke blogger.com
  2. klik Rancangan, kemudian pilih Edit HTML, ada baiknya jika anda download dulu template lengkap anda
  3. Beri tanda centang pada Expand Template Widget
  4. Cari kode seperti ini
    ]]></b:skin>
  5. Copy kode berikut lalu letakkan tepat di atas (sebelum) kode tadi

    .breadcrumbs {
    padding: 5px 5px 5px 0;
    margin: 0 0 5px;
    font-size: 95%;
    line-height: 1.4em;
    border-bottom: 1px solid #ccc;
    }
  6. Kemudian cari lagi kode seperti ini

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
    <h3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
  7. Copy kode berikut lalu letakkan tepat di atas (sebelum) kode tadi

    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='breadcrumbs'>
    You Are Here &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
    </b:loop>
    </b:if> &#187; <data:post.title/>
    </div>
    </b:if>
    </b:if>
  8. klik Simpan

     Sekarang lihat hasilnya, jika anda berhasil maka akan muncul navigasi breadcrumbs di atas judul postingan anda seperti pada blog ini. Selamat mencoba dan semoga bermanfaat.... ^^,

Friday, July 23, 2010, 

membuat current page navigasiCurrent page merupakan tampilan pada navigasi yang berfungsi untuk menandai page yang sedang aktif pada navigasi. Untuk lebih jelasnya bisa anda lihat pada image di samping. Berhubung current page ini sudah saya aplikasikan pada template saya kemarin, anda bisa melihat livenya di sini. Selain berfungsi untuk menandai page aktif, current page juga membuat tampilan blog menjadi lebih elegant dengan sedikit pengembangan.

Mengenai bagaimana cara membuatnya silakan ikuti langkah di bawah ini.

  1. Login ke blogger.com
  2. Klik Rancangan
  3. Klik Edit HTML, tidak perlu memberi centang pada Expand Widget Template
  4. Cari kode berikut

    </head>

  5. Copy kode di bawah ini dan letakkan tepat sebelum (di atas) kode tadi

    <style type='text/css'>
    #menu-wrapper {
    margin: 0;
    padding: 5px 10px 5px 0;
    background: #b7b7ff;
    font-size: .9em;
    line-height: 22px;
    border-top: 1px solid #a8a8ff;
    border-bottom: 1px solid #a8a8ff;
    }
    .menu {
    margin: 0;
    float: left;
    height: 26px;
    }
    .menu ul {
    margin: 0;
    padding: 6px 0 0 10px;
    font-weight: bold;
    list-style-type: none;
    text-align: left;
    }
    .menu li {
    display: inline;
    margin: 0;
    }
    .menu li a {
    text-decoration: none;
    margin: 0;
    padding: 4px 10px;
    color: #32527a;
    }
    .menu li a:hover {
    background: #c6c6ff;
    color: #64527a;
    }
    .current-cat{
    padding: 5px 10px;
    color: #64527a;
    background:#c6c6ff;
    border: 1px solid #a8a8ff;
    -moz-border-radius: 5px; -webkit-border-radius: 5px;
    border-radius: 5px;
    }
    .actived a {
    color: #64527a !important;
    }
    </style>

    <script type='text/javascript'>
    function currentpage (url,current,name) {
    var name = name ;
    var url = url;
    var current = current;
    if (current == url) {
    document.write (&#39;&lt;li class=&quot;current-cat&quot;&gt;&lt;a href=&quot;&#39;+url+&#39;&quot;&gt;&#39;+name+&#39;&lt;/a&gt;&lt;/li&gt;&#39;);
    }
    else {
    document.write (&#39;&lt;li&gt;&lt;a href=&quot;&#39;+url+&#39;&quot;&gt;&#39;+name+&#39;&lt;/a&gt;&lt;/li&gt;&#39;);
    }
    }
    </script>
    p
  6. Cari lagi kode seperti ini

    <div id='header-wrapper'>
  7. Copy kode berikut lalu letakkan tepat di atas (sebelum) kode tadi (langkah ini menentukan letak navigasi anda, apabila diletakkan sebelum kode tadi maka menu anda akan berada di atas header. Dan sebaliknya apabila kode diletakkan setelah end tag kode tadi maka navigasi akan berada di bawah header.)

    <div id='menu-wrapper'>
    <b:section class='menu' id='menubar' showaddelement='no'>
    <b:widget id='LinkList1' locked='false' title='' type='LinkList'>
    <b:includable id='main'>
    <ul>
    <b:loop values='data:links' var='link'>
    <script type='text/javascript'> currentpage(&quot;<data:link.target/>&quot;,&quot;<data:blog.url/>&quot;,&quot;<data:link.name/>&quot;); </script>
    </b:loop>
    </ul>
    </b:includable>
    </b:widget>
    </b:section>
    </div>
  8. Klik Simpan

     Untuk menambahkan link pada navigasi, silakan masuk Rancangan » Elemen Halaman » pilih Daftar Link. Tambahan Url yang ingin anda pasang pada navigasi. Setelah selesai jangan lupa klik Simpan. Sekarang cek ke blog anda, ^^, semoga bermanfaat dan happy blogging....

Tuesday, July 6, 2010, 

Setelah cukup lama tidak aktif di dunia blogging, akhirnya baru sekarang bisa posting lagi. Akhir-akhir ini saya disibukkan oleh aktifitas keseharian saya. Sebagai postingan pertama saya setelah sekian lama istirahat dari dunia blogging saya akan memberikan sebuah tutorial tentang membuat vertical menu dengan efek show hide. Tutorial ini saya pelajari dari Antonio Lupeti, mungkin sudah tidak asing lagi bagi anda dengan blogger yang saya maksud. Live demonya silakan anda lihat DI SINI. bagi anda yang berminat untuk membuatnya silakan ikuti langkah-langkah di bawah ini.


STEP 1

  1. Login ke blogger.com
  2. Klik Rancangan
  3. Klik Edit HTML
  4. Cari kode berikut

    </head>

    Copy kode di bawah ini, lalu letakkan tepat di atas kode tadi.

    <style type="text/css">
    /* --- button --- */
    .button{
    background:url(http://i46.tinypic.com/2rbz7rt.png) -32px right no-repeat;
    color:#FFFFFF;
    clear:both;
    display:block;
    float:left;
    font-size:13px;
    font-weight:bold;
    height:31px;
    line-height:31px;
    width:auto;
    margin-right:30px;
    }
    a.button {
    text-decoration:none;
    }
    .button span {
    background:url(http://i46.tinypic.com/2rbz7rt.png) left top no-repeat;
    display:block;
    height:31px;
    line-height:31px;
    padding-left:10px;
    padding-right:8px;
    margin-right:20px;
    }
    /* --- vertical menu --- */
    .v-menu{
    border:solid 1px #7F9FBF;
    width:200px;
    clear:both;
    }
    ul.v-menu, .v-menu li{
    padding:0;
    margin:0;
    list-style:none;
    }
    ul.v-menu{
    clear:both;
    margin-top:6px;
    padding:6px 10px;
    }
    .v-menu li a{
    color:#555555;
    font-weight:bold;
    display:block;
    border-top:solid 1px #DEDEDE;
    padding:4px;
    text-decoration:none;
    }
    .v-menu li a:hover{
    color:#999999;
    }
    </style>
    <script type="text/javascript">
    function showElement(layer){
    var myLayer = document.getElementById(layer);
    if(myLayer.style.display=="none"){
    myLayer.style.display="block";
    myLayer.backgroundPosition="top";
    } else {
    myLayer.style.display="none";
    }
    }
    </script>
  5. Klik Simpan

STEP 2

  1. Setelah template anda tersimpan, Klik Rancangan
  2. Pada menu Elemen Halaman, pilih Tambah Widget sesuai dengan letak yang anda inginkan
  3. Setelah terbuka halaman tambah widget pilih penambahan HTML/JavaScript
  4. Pada halaman Konfigurasi HTML/JavaScript beri judul widget anda, kemudian copy kode berikut dan letakkan pada content.

    <a href="#" class="button" onclick="javascript:showElement ('v-menu')">
    <span>ClickHere</span></a>
    <ul id="v-menu" class="v-menu" style="display: none;">
    <li><a href="http://URL ANDA">TEXT ANDA</a></li>
    <li><a href="http://URL ANDA">TEXT ANDA</a></li>
    <li><a href="http://URL ANDA">TEXT ANDA</a></li>
    <li><a href="http://URL ANDA">TEXT ANDA</a></li>
    <li><a href="http://URL ANDA">TEXT ANDA</a></li>
    </ul>

    Keterangan :
    * Pada list item (<li><a href="http://URL ANDA">TEXT ANDA</a></li>), silakan sesuaikan dengan Url yang anda tuju dan juga text anda.
  5. Klik Simpan

     Sekarang lihat blog anda, jika anda berhasil membuatnya maka akan terlihat vertical menu seperti di blog saya yang ini. Selamat mencoba dan semoga bermanfaat ^^,. Saya mau blogwalking dulu, kangen ama temen-temen blogger semua....

Wednesday, June 30, 2010, 

Sesuai dengan namanya, efek shadow image merupakan efek pada image yang menyerupai bayangan. Dalam penerapan efek shadow tidak sepenuhnya dibentuk dengan kode CSS, melainkan memanipulasinya dengan menggunakan image. Maaf apabila saya tidak bisa memberikan demonya di blog ini, untuk itu live demo saya tempatkan di blog yang saya khususkan untuk live demo. karena tidak mungkin lagi rasanya jika template ini harus ditambah banyak kode lagi ^^, Silakan klik DI SINI untuk melihat demonya. Berikut ini cara untuk membuatnya.


  1. Login ke blogger.com
  2. Klik Rancangan
  3. Pilih menu Edit HTML (tidak perlu memberi centang pada 'Expand Template Widget')
  4. Cari kode berikut

    ]]></b:skin>
  5. Copy kode berikut ini lalu letakkan tepat di atas kode tadi.

    .shadow img {
    background: url(http://i50.tinypic.com/10xyg4w.png) no-repeat right bottom;
    padding: 0 6px 6px 0;
    }
  6. Klik Simpan

     Untuk menerapkan efek shadow pada image kodenya seperti ini.

<div class="shadow"><img border="0" src="http://URL GAMBAR ANDA"/></div>

     Kekurangan dalam langkah ini anda harus memasukkan kode CSS tersebut setiap anda ingin memposting image. ^^, Solusinya di bawah ini adalah penerapan efek shadow pada image secara otomatis.

  1. Login ke blogger.com
  2. Klik Rancangan
  3. Beri centang pada Expand Template Widget
  4. Setelah loadnya selesai, Cari kode berikut

    <data:post.body/>
  5. Lalu sisipkan kode CSS tadi, perhatikan kode di bawah ini

    <div class="shadow"><data:post.body/></div>
  6. Klik Simpan

     Dengan menerapkan langkah kedua ini, begitu anda memposting image pada blog maka akan secara otomatis terdapat shadow pada image tersebut. Semoga bermanfaat...
^^,

Thursday, June 24, 2010, 

Selain untuk mempercantik blog, fungsi dari Highlight author comments adalah untuk membedakan komentar antara visitor dan author (admin) blog. Jadi misalkan ada visitor yang bertanya, maka akan tampak jelas apabila author tersebut membalas atau memberikan jawaban kepada visitor. Dengan alasan demikian tutorial ini sangat mendukung untuk kotak komentar blog yang belum dilengkapi fasilitas Reply. Lebih jelasnya anda bisa melihatnya live demo pada blog ini atau bisa juga anda lihat DI SINI.

Berikut langkah-langkah untuk membuatnya.

  1. Login ke blogger.com
  2. Klik Rancangan
  3. Klik Edit HTML, kemudian beri centang pada Expand Widget Template
  4. Cari kode berikut

    ]]></b:skin>

    Copy kode di bawah ini lalu letakkan tepat di atas kode tadi.

    .owner-Body {
    background: #f6f6f6;
    margin-top: -7px;
    padding-left: 10px;
    padding-top: 10px;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    border-left: 1px solid #ccc;
    }
    .owner-Body p {
    margin: 0;
    padding-bottom: 15px;
    }

    * pada background, kode warna #f6f6f6 menentukan warna background komentar admin. Anda bisa menggantinya sesuai dengan keinginan anda
    * anda juga bisa menambahkan image pada kotak komentar admin dengan menambahkan kode berikut url(http://image anda) setelah kode warna (beri spasi)
  5. Kemudian cari kode berikut

    <data:commentPostedByMsg/>
    </dt>
    <dd class='comment-body'>
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>
    </dd>

    Copy kode di bawah ini kemudian sisipkan pada kode di atas

    <b:if cond='data:comment.author == data:post.author'>
    <dd class='owner-Body'>
    <p><data:comment.body/></p>
    </dd>
    <b:else/>

    </b:if>

    Penempatannya seperti ini

    <data:commentPostedByMsg/>
    </dt>

    <b:if cond='data:comment.author == data:post.author'>
    <dd class='owner-Body'>
    <p><data:comment.body/></p>
    </dd>
    <b:else/>
    <dd class='comment-body'>
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>
    </dd>

    </b:if>
  6. Klik Simpan

Sekarang anda buka blog anda dan berikan komentar pada blog anda sendiri dan bedakan dengan tampilan komentar sebelum anda menambahkan kode-kode di atas. Semoga bermanfaat dan happy blogging.... ^^,

Saturday, June 19, 2010, 

Tidak begitu jauh bedanya dengan postingan saya kemarin, tentu saja masih berhubungan dengan comment ^^, sebelumnya saya pernah membahas tentang cara membuat comments bubble dan cara membuat comments bubble versi 2 maka kali ini saya akan membahas tentang cara membuat number comments.

Tips yang saya maksudkan adalah pemberian nomor pada kotak komentar. Untuk Live demo silakan klik di sini di sini. Untuk membuatnya silakan ikuti langkah-langkah berikut.

  1. Login ke blogger.com
  2. Klik Rancangan
  3. Klik Edit HTML, kemudian beri centang pada Expand Widget Template
  4. STEP 1
    Cari kode berikut

    ]]></b:skin>

    Copy kode di bawah ini lalu letakkan tepat di atas (sebelum) kode tadi.

    .comments-counter a:link,.comments-counter a:visited {
    color: #000 !important;
    text-decoration: none !important;
    background: url(http://i47.tinypic.com/99m5on.jpg) no-repeat;
    width: 50px;
    height: 48px;
    float: right;
    display: block;
    margin-right: 5px;
    margin-top: -15px;
    text-align: center;
    font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
    font-size: 15px;
    font-weight: normal;
    }
    .comments-counter a:hover,.comments-counter a:active {
    color: #666 !important;
    text-decoration: none !important;
    }
  5. STEP 2
    Kemudian cari kode berikut

    <b:loop values='data:post.comments' var='comment'>

    Copy kode di bawah ini lalu letakkan tepat di atas (sebelum) kode tadi.

    <script type='text/javascript'>var CommentsCounter=0;</script>
  6. STEP 3
    Terakhir cari kode berikut

    <data:commentPostedByMsg/>

    Copy kode berikut lalu letakkan tepat di bawah (setelah) kode tadi

    <span class='comments-counter'>
    <a expr:href='data:comment.url' title='Comment Link'>
    <script type='text/javascript'>
    CommentsCounter=CommentsCounter+1;
    document.write(CommentsCounter)
    </script>
    </a>
    </span>
  7. klik Simpan

     Sekarang lihat blog anda, buka postingan anda yang memiliki komentar. Perhatikan kotak komentar pada bagian kanan. Anda dapat mengatur posisi angka pada icon bubble dengan menyesuaikan kode yang berwarna merah pada STEP 1. Anda juga bisa mengganti icon bubble sesuai dengan keinginan anda dengan cara mengganti url yang berwarna biru dan jangan lupa sesuaikan juga kode yang berwarna orange dengan ukuran icon bubble anda (STEP 1). Semoga bermanfaat...^^,

Monday, June 14, 2010, 

membuat bubble comment versi 2Pada postingan sebelumnya tentang cara membuat comments bubble pada blog mas Rizal memberikan sebuah pertanyaan kepada saya tentang bagaimana cara membuat comments bubble seperti pada blog ini. Untuk itu pada postingan ini saya akan memberikan sedikit tutorial tentang cara membuat comments bubble versi 2, ^^, judulnya agak-agak mirip dengan postingan kemarin.

Langsung aja berikut langkah-langkahnya.

  1. Login ke blogger.com
  2. Klik Rancangan
  3. Klik Edit HTML, kemudian beri centang pada Expand Widget Template
  4. Cari kode berikut

    ]]></b:skin>

    Copy kode di bawah ini lalu letakkan tepat di atas kode tadi.

    .comm-link {
    padding: 9px 0 0 26px;
    margin: 10px 0 0 0;
    font-size: 10px;
    font-family: Arial,Tahoma,Verdana;
    text-transform: capitalize;
    background: transparent url('http://i48.tinypic.com/2u8z29z.png') no-repeat left;
    }

    Keterangan :
    *Kode yang berwarna merah adalah kode image (bubble), image pada URL tersebut seperti image pada awal postingan ini (ukuran 24px X 24px). Silakan ganti apabila anda menginginkan image yang laen.
  5. Kemudian cari lagi kode berikut

    <div class='post-header-line-1'/>

    Copy kode berikut lalu letakkan tepat di bawah kode tadi

    <b:if cond='data:post.allowComments'>
    <a class='comm-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
    <b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:commentLabelPlural/></b:if>
    </a>
    </b:if>
  6. klik Simpan

     Terakhir anda tinggal melihat hasilnya, ^^, semoga bermanfaat.

Saturday, June 12, 2010, 

Membuat comments bubble pada blogMasih berhubungan dengan kode CSS seperti pada postingan sebelumnya, kali ini saya akan membahas mengenai cara membuat comments bubble pada blog. Sedikit penjelasan, comments bubble merupakan tampilan jumlah komentar yang dimanipulasi seakan-akan berada dalam gelembung.

Langsung saja untuk anda yang berminat untuk membuatnya, silakan ikuti langkah-langkah di bawah ini.

  1. Login ke blogger.com
  2. Klik Rancangan, (berhubung sekarang Blogger.com menyediakan fitur baru (desain template), maka fitur tata letakpun berada dalam fitur Rancangan)
  3. Klik Edit HTML, kemudian beri centang pada Expand Widget Template
  4. Cari kode berikut

    </head>
  5. Copy kode di bawah ini lalu letakkan tepat di atas (sebelum) kode tadi.

    <style type="text/css">
    .comment-bubble {
    float: right;
    background: url(http://i46.tinypic.com/df97c4.jpg) no-repeat;
    width: 55px;
    height: 40px;
    font-size: 18px;
    margin-top: -15px;
    margin-right: 2px;
    text-align: center;
    }
    </style>

    Keterangan :
  6. Kode yang berwarna merah merupakan Url tempat anda menyimpan image bubble. Jika anda menggunakan Url di atas maka image bubble yang anda gunakan seperti ini

    Bubble image

  7. Kode yang berwarna biru pada width dan height silakan sesuaikan dengan ukuran image anda.
  8. Cari lagi kode seperti ini

    <h3 class='post-title entry-title'>
  9. Copy kode di bawah ini lalu letakkan tepat di bawah kode tadi.

    <b:if cond='data:post.allowComments'>
    <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
    </b:if>
  10. Klik Simpan

     Selanjutnya silakan lihat blog anda. Perhatikan bagian disamping kanan judul postingan anda. Semoga bermanfaat...

Thursday, June 10, 2010, 

Membuat efek blurSetelah kemarin saya posting mengenai cara membuat efek scroll, maka sekarang saya akan membahas tentang cara membuat efek blur pada image. Image akan tampak samar (blur) lalu akan tampak jelas saat disorot cursor. Kurang lebih demikian penjelasan singkatnya. Untuk melihat demonya silakan arahkan cursor anda pada image di samping. Cara membuatnya cukup mudah, hanya diperlukan sedikit penambahan kode CSS.

Silakan baca lebih lanjut langkah-langkah untuk membuatnya.

  1. "Login" seperti biasa di acount blogger anda
  2. Klik "Tata Letak", lalu klik "Edit HTML"
  3. Cari kode berikut :

    </head>

    Copy kode di bawah ini lalu letakkan (paste) tepat di atas (sebelum) kode tadi.


    <style type="text/css">
    a.linkopacity img {
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    -khtml-opacity-: 0.5;
    }

    a.linkopacity:hover img {
    filter: alpha(opacity=50);
    -moz-opacity: 1.0;
    opacity: 1.0;
    -khtml-opacity-: 1.0;
    }
    </style>
  4. Klik Simpan


     Langkah selanjutnya adalah cara menerapkan efek blur pada image. Seperti umumnya kode yang digunakan untuk membuat link pada image adalah seperti berikut

<a href="URL YANG ANDA TUJU"><img src="HOSTING IMAGE ANDA"></a>


Silakan anda ganti kode di atas menjadi seperti ini

<a class="linkopacity" href="URL YANG ANDA TUJU"><img src="HOSTING IMAGE ANDA"></a>


Namun apabila anda tidak menginginkan image yang berupa link, kodenya sebagai berikut

<a class="linkopacity"><img src="HOSTING IMAGE ANDA"></a>


     Kode yang berwarna merah adalah kode yang harus anda tambahkan. Sekian dulu trik dari saya, semoga bermanfaat, dan happy blogging..... ^^,

Tuesday, June 8, 2010, 

membuat efek scrollMemberikan efek scroll pada content merupakan solusi yang tepat untuk anda yang ingin memperingkas halaman blog anda. Terlebih untuk bagian sidebar dan bottom bar yang memiliki ruang sempit untuk dipasang widget. Kode untuk membuat scroll tidak terlalu rumit, bahkan bisa dikatakan lebih simple daripada kode-kode yang lain. Untuk membuatnya silakan anda copy code di bawah ini.


<div style="overflow:auto; width:300px; height:150px; padding:10px; border:1px solid #eee">letakkan content anda di sini</div>

Keterangan :
  1. pada kode width, angka 300 menunjukkan lebar kotak scroll
  2. pada kode width, angka 150 menunjukkan tinggi kotak scroll
  3. pada kode border, kode #eee menunjukkan warna border kotak scroll

Misalnya saya ingin membuat daftar nama teman-teman saya.

  1. Avin
  2. Awan
  3. Bams
  4. Brink
  5. Cemed
  6. Dendy
  7. Didot
  8. Dimas
  9. Dion
  10. Dony
  11. Ferry
  12. Gache
  13. Gepenk
  14. Irul
  15. Iqbal
  16. MD
  17. Memed
  18. Ndaru
  19. Sonny
  20. Suject

     Dengan sedikit penambahan kode CSS diatas, efek scrollpun jadi. ^^, Selamat mencoba dan semoga bermanfaat.

Thursday, June 3, 2010, 

menu drop down navigasiPostingan ini merupakan permintaan dari Paman Helman lewat kotak komentar pada postingan saya sebelumnya, adapun yang dipertanyakan oleh paman Helman yakni tentang bagaimana cara membuat menu drop down pada navigasi. Perhatikan image di samping. Sebelumnya saya minta maaf kepada paman Helman, karena baru sempet posting, akhir-akhir ini saya disibukkan oleh aktifitas saya di dunia nyata ^^. Kembali ke topik, pada navigasi di atas saya menggunakan CSS dan HTML. Dikarenakan menggunakan kode CSS maka kodenya pun lumayan ribet, kurang lebih seperti ini.


#NavbarMenu {
background:#434343; /*-- warna background navigasi --*/
width:900px; /*-- lebar navigasi --*/
height:34px; /*-- tinggi navigasi --*/
color:#ccc; /*-- warna teks navigasi --*/
margin:0 auto;
padding:0;
font:bold 8px Arial,Tahoma,Verdana;
}

#NavbarMenuleft {
width:650px; /*-- lebar menu (biasanya bagian kanan untuk kotak pencarian) --*/
float:left; /*-- posisi menu --*/
margin:0;
padding:0;
}

#nav {
margin:0;
padding-top:3px;
}

#nav ul {
float:left;
list-style:none;
margin:0;
padding:0;
}

#nav li {
list-style:none;
margin:0;
padding:0;
}

#nav li a, #nav li a:link, #nav li a:visited {
color:#ccc; /*-- warna teks menu --*/
display:block;
text-transform:uppercase;
margin:0;
padding:9px 15px 8px;
font:bold 12px Arial,Times New Roman;
}

#nav li a:hover, #nav li a:active {
background:#333; /*-- warna background menu drop down --*/
color:#FFF; /*-- warna teks pada menu drop down --*/
margin:0;
padding:9px 15px 8px;
text-decoration:none;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background:#333; /*-- warna background menu drop down --*/
width:150px; /*-- lebar menu drop down --*/
color:#ccc; /*-- warna teks pada menu drop down --*/
text-transform:lowercase;
float:none;
margin:0;
padding:7px 10px;
border-bottom:1px solid #131313; /*-- warna border bawah pada menu drop down --*/
border-left:1px solid #131313; /*-- warna border kiri pada menu drop down --*/
border-right:1px solid #131313; /*-- warna border kanan pada menu drop down --*/
font:normal 14px Georgia,Times New Roman;
}

#nav li li a:hover, #nav li li a:active {
background:#434343; /*-- warna background aktif menu drop down --*/
color:#fff; /*-- warna teks aktif pada menu drop down --*/
padding:7px 10px;
}


#nav li {
float:left;
padding:0;
}

#nav li ul {
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px; /*-- lebar menu drop down --*/
margin:0;
padding:0;
}


#nav li ul a {
width:140px; /*-- lebar menu drop down --*/
}

#nav li ul ul {
margin:-32px 0 0 171px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left:-999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left:auto;
}

#nav li:hover, #nav li.sfhover {
position:static;
}

* Silakan sesuaikan dengan template anda semua kode yang saya beri warna merah.

     Copy kode di atas lalu simpan dulu di note atau editor text lainnya. Kemudian ikuti langkah berikut.

  1. Login akun blogger anda.
  2. Klik Tata Letak, kemudian klik Edit HTML
  3. Expand widget template, setelah prosesnya selesai, cari kode berikut ]]
  4. Letakkan kode yang anda copy tadi tepat di atas kode ]]
  5. Copy kode di bawah ini

    <div id='NavbarMenu'>
    <div id='NavbarMenuleft'>
    <ul id='nav'>
    <li><a href='URL'>Menu 1</a></li>
    <li><a href='URL'>Menu 2</a></li>
    <li><a href='#'>More &#187;</a>
    <ul>
    <li><a href='#'>Menu Drop Down 1#1&#187;</a>
    <ul>
    <li><a href='#'>Menu Drop Down 2#1 &#187;</a>
    <ul>
    <li><a href='URL'>Menu Drop Down 3#1</a></li>
    <li><a href='URL'>Menu Drop Down 3#2</a></li>
    </ul>
    </li>
    <li><a href='URL'>Menu Drop Down 2#2</a></li>
    </ul>
    </li>
    <li><a href='URL'>Menu Drop Down 1#2</a></li>
    </ul>
    </li>
    </ul>
    </div>
    </div>

    * Ganti URL dengan url yang anda tuju.
  6. Lalu cari lagi kode <div id='header-wrapper'>
  7. Apabila anda ingin navigasi berada di atas header, letakkan kode tadi (kode kedua) tepat diatas kode <div id='header-wrapper'>
  8. Tetapi apabila anda ingin navigasi berada di bawah header, letakkan kode tadi di bawah kode end tag header-wrapper. </div><!-- end header-wrapper -->
  9. Setelah selesai klik Simpan

     Cukup panjang kan kodenya?, ^^ Silakan lihat hasilnya, Semoga bermanfaat...

Tuesday, May 25, 2010, 

M
elanjutkan postingan saya kemarin, yakni tentang Menampilkan elemen hanya pada halaman depan saja, maka kurang lengkap rasanya jika artikel tersebut nggak ada lawannya yaitu menampilkan elemen hanya pada halaman selanjutnya. Ini merupakan kebalikan dari artikel saya kemarin, dimana elemen tidak akan muncul pada halaman depan melainkan hanya pada halaman selanjutnya saja.
Cara membuatnya cukup dengan menambahkan kode seperti ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>

dan

</b:if>

     Penempatannya kode pertama diletakkan sebelum kode elemen yang akan muncul pada halaman selanjutnya, kemudian kode kedua diletakkan setelah end tag kode elemen yang akan muncul di halaman selanjutnya. Misalnya saya ingin elemen sidebar hanya akan muncul pada halaman selanjutnya pada template saya, contohnya seperti ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sidebar'>
<b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'/>
.....
.....
</div><!--- end sidebar --->

</b:if>

     Ingat penambahan kode sebelum tag pembuka dan setelah tag penutup. Selamat mencoba dan semoga bermanfaat...

Saturday, May 22, 2010, 

S
eperti yang banyak terlihat pada template magazine, secara visual antara tampilan pada halaman depan dengan halaman selanjutnya mempunyai tampilan yang berbeda. Misalkan saja pada template magazine yang mempunyai 3 kolom pada halaman depan kemudian pada halaman selanjutnya akan menjadi 2 kolom. Atau bisa juga pada sidebar yang berisi adsense berupa banner pada halaman depan kemudian pada halaman selanjutnya menjadi adsense berupa text.
Saya yakin anda pasti pernah menjumpai template seperti itu. Untuk membuat tampilan seperti itu cukup mudah, yakni dengan menambahkan kode seperti ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>

dan

</b:if>

     Penempatannya kode pertama diletakkan sebelum kode elemen yang akan dihilangkan pada halaman selanjutnya, kemudian kode kedua diletakkan setelah end tag kode elemen yang akan di hilangkan. Misalnya saya ingin menghilangkan elemen bottom pada halaman selanjutnya pada template saya, contohnya seperti ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='bottom'>
<b:section class='bottom' id='bottom' preferred='yes' showaddelement='yes'/>
.....
.....
</div><!--- end bottom --->

</b:if>

     Cukup mudah kan? Semoga bermanfaat...

Friday, May 21, 2010, 

6 Template SEO FriendlySekarang banyak sekali blogger yang menyediakan template blog dengan berbagai style. Jika dilihat sekilas memang tak ada yang kurang dari template-template tersebut. Namun kita tidak pernah mengetahui template tersebut kita SEO Friendly atau tidak? Nah disini saya akan memberikan 6 contoh template SEO friendly untuk blogspot.

Seperti apa yang sudah dijelaskan oleh Mani Khartik, seorang blogger asal India yang sudah melakukan pengujian terhadap template tersebut. Berikut inilah 6 template yang dimaksud.

1. Simple blogger template by Final Sense
2. Blue Square by Template Panic
3. Nyoba 780 by Free Blogger Template
4. Bussines Profesional by Isnaini
5. Eagle by Final Sense
6. Yellow Simple by Final Sense

     Dari 6 template di atas kita harus bangga dengan karya anak Negeri yakni mas Isnaini, yang telah membuat template dan masuk dalam daftar di atas (point 3 dan 4). Semoga bermanfaat...

Thursday, May 20, 2010, 

Hosting Javascript di google codeSalah satu alasan mengapa blog yang menggunakan javascript menjadi berat adalah tempat hosting file javascript yang kita gunakan. Tergantung juga sama koneksi jaringan ke web hosting javascript tersebut. Untuk itulah jika kita ingin mengupload file javascript maka usahakan untuk memilih web hosting yang cepat, hal ini bertujuan untuk mencegah pemanggilan kode javascript yang lambat.

Di sini saya akan membahas cara hosting file javascript di google code, ini merupakan layanan hosting dari google. Selain gratis (halah...seneng banget kalo dikasih gratisan), pemanggilan kode javascript anda di jamin cepat. Bagi anda yang berminat untuk hosting javascript anda di google code silakan langsung menuju ke TKP.

1. Setelah anda masuk halaman goole code seperti gambar di atas. Login menggunakan google akun anda, kemudian Klik create a project, anda akan diminta untuk memasukkan project name, project summary, dan description. Setelah semua anda isi, sekarang klik Create project.

2. Untuk mengupload file javascript anda, klik Download pada halaman depan google code anda. Kemudian klik New download. Masukkan file javascript anda pada kolom upload, dan jangan lupa isi kolom keterangan untuk file anda.

3. Klik Submit file dan tunggu proses uploadnya selesai.

4. Kembali ke halaman download untuk melihat file yang anda upload tadi. Klik kanan file anda dan copy URL file javasript anda.

     Untuk memanggil file javascript anda tambahkan kode ini <script src="PASTE URL FILE JAVASCRIPT ANDA DISINI"></script>. Semoga bermanfaat ^^

Wednesday, May 19, 2010, 

mengatasi form koment yang bermasalahMungkin anda pernah mengalami kesulitan saat comment di blog orang lain yang menggunakan verifikasi kata. Memang untuk melakukan pencegahan Spam pada komentar, pihak blogger.com menawarkan fasilitas ini. Namun terkadang saat kita comment pada blog yang menggunakan verifikasi, huruf captha untuk verivikasi tidak muncul tidak utuh. Jengkel kan?

Nah bagi anda yang tidak menginginkan hal ini terjadi pada blog anda yang menggunakan verifikasi kata (Jika dihapuspun rasanya juga berat, 'cause verifikasi kata tersebut dapat membantu anda mengurangi spam), silakan ikuti langkah berikut.

1. Login ke blog anda.

2. Klik Tata Letak, kemudian pilih Edit HTML

3. Beri tanda centang pada expand widget template, tunggu sampai prosesnya selesai.

4. Cari kode berikut

<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>

5. Silakan pilih salah pengeditan di bawah ini.

* Sesuaikan height (tingginya), 275 ganti dengan ukuran yang lebih tinggi. Misalnya 350

* Ganti kode no menjadi auto

6. Klik Simpan

Sekarang lihat hasilnya, selamat mencoba dan semoga bermanfaat...

Sunday, May 16, 2010, 

Membuat Tombol Save Page As PDFBanyak cara para blogger untuk memanjakan pengunjung setia mereka. Salah satunya adalah dengan cara memasang tombol save page as PDF. Dengan menggunakan fasilitas tersebut pengunjung dapat menyimpan artikel dari sebuah blog (HTML) ke dalam PDF. Dalam hal ini tentu saja harus menggunakan pihak ketiga untuk meng-convert file yang berformat HTML menjadi PDF.

Caranya:

STEP 1 :


1. Silakan anda kunjungi http://web2.pdfonline.com

2. klik Sign Up

3. Isi form yang disediakan,

4. Setelah akun anda selesai dibuat, sekarang login sesuai akun anda tadi.

5. Sesuaikan ukuran page PDF anda.

6. Klik Generate the JavaScript

7. Copy kode JavaScriptnya, simpan dulu di note atau text editor lainnya.

     Untuk memasangnya silakan ikuti langkah berikut.

STEP 2 :


1. Login seperti biasa di blog anda.

2. Klik Tata Letak kemudian klik Edit HTML.

3. Beri tanda centang pada expand widget template, tunggu sampai prosesnya selesai.

4. Cari kode seperti berikut.

<data:post.body/>


atau

<p><data:post.body/></p>

5. Copy kode berikut, lalu letakkan (paste) tepat di bawah (setelah) kode tersebut.

<div style="float:left; margin:10px;">
GANTI DENGAN KODE JAVASCRIPT YANG ANDA SIMPAN TADI</div>


6. Klik Simpan

     Berhubung kerjaan udah numpuk karena saya tinggal Online melulu,^_^ sekian dulu tips dari saya. Semoga bermanfaat....

Saturday, May 15, 2010, 

Menampilkan Video Pada BlogPas lagi jalan-jalan di YouTube, dapet lagi nih ide buat posting. Yah posting apalagi kalau nggak mengenai cara menampilkan video pada blog. Asal nggak di pake' buat posting video panas atau adegan hot lainnya yang sekarang lagi menjamur,hehe... Cukup untuk video-video yg wajar saja.

Untuk menampilkannya, jika anda sudah mempunyai URL video yang anda simpan diYouTube, silakan copy kode di bawah ini.

<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/halnj0ZgUGs&hl=en_US&fs=1&
"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/halnj0ZgUGs&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>


Keterangan:
- ganti ukuran panjang dan lebar video sesuai yang anda inginkan.
- ganti URL http://www.youtube.com/v/halnj0ZgUGs&hl=en_US&fs=1& dengan URL video milik anda.

nah, di bawah ini hasilnya:



     Namun jika anda belum mempunyai URL videonya. Silakan anda pilih video dari YouTube yang ingin anda tampilkan di blog. Setelah ketemu, klik "Embed" yang terletak di sebelah kanan bawah pada video tersebut. Kemudian sesuaikan warna serta ukurannya, Setelah itu anda tinggal copy kodenya lalu paste di blog anda. Mudah kan? Selamat mencoba....

Friday, May 14, 2010, 

Memasang plugin like facebookMenjawab pertanyaan yang diajukan oleh TintaBesi kepada saya pada postingan sebelumnya, yakni tentang bagaimana cara memasang plugin like facebook. (mungkin mas Abdul Hafizh juga menanyakan ini ya?) Pada intinya pemasangan tombol share on facebok dan pemasangan plugin like facebook adalah sama. Hanya berbeda pada scriptnya saja. Semua penempatannya tergantung anda sebagai admin blog. hehe... sang admin kan berkuasa.

Tidak perlu lama-lama saya bercerita (ntar malah dikira di"nina-bobokan",^_^) langsung saja ikuti langkah-langkah di bawah ini.

1. Login ke blogger.com sesuai dengan akun anda, tahukan kenapa harus sesuai? Kalo akun lain keenakan yang punya akun donk udah dipasangin plugin like facebook. hehe...

2. Klik Tata Letak kemudian klik Edit HTML, setelah itu download lengkap template anda.

3. Beri tanda centang pada expand widget template.

4. Cari kode seperti berikut.

<data:post.body/>

atau

<p><data:post.body/></p>

Copy kode di bawah ini lalu paste tepat di bawahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=80&quot;' scrolling='no' frameborder='0' style='border:none; overflow:hidden; width:450px; height:40px;' allowTransparency='true'></iframe>
</b:if>

5. Klik "Simpan".

Sekarang coba anda lihat hasilnya.

Keterangan:
- Apabila anda ingin mengganti plugin like (suka) menjadi recommend (sarankan) maka anda cukup mengganti kode yang berwarna merah dengan action=recommend
- Langkah diatas adalah penempatan plugin di bawah posting. Apabila anda ingin penempatan di atas posting, silakan anda paste kode di atas setelah kode <data:post.body/> atau <p><data:post.body/></p>.

     Semoga artikel diatas bermanfaat untuk anda.

Feed burner dan Related Post menjadi satu kolomJika pada postingan sebelumnya saya pernah membahas mengenai cara membuat Related Post (Artikel Terkait). Maka pada postingan saya kali ini akan membahas mengenai cara Membuat Feed Burner dan Related Post menjadi lebih menarik, yakni dengan cara membuat kedua elemen tersebut berada dalam satu kolom. sesuai dengan pertanyaan yang telah diberikan oleh mas Mansuka kepada saya lewat kotak komentar (maaf mas baru sempat posting). Contohnya bisa anda lihat pada gambar di samping, atau bisa juga anda lihat hasilnya pada akhir postingan ini.

Langsung saja berikut cara pembuatannya.

1. Login ke akun blogger anda.

2. Klik Tata Letak kemudian klik Edit HTML, download lengkap template anda.

3. Beri tanda centang pada expand widget template.

4. Cari kode seperti berikut.
]]</b:skin>

copy kode di bawah ini lalu letakkan tepat di atas kode tadi.

.related{ width:534px;background:#eee url(http://i42.tinypic.com/fan675.gif) 43% 0 repeat-y; height:200px; overflow:auto; padding:15px; margin: 0 0 10px; border:1px solid #ccc}
.subscribe{width:250px; float:left}
.subscribe p.img{margin-bottom:10px; font-weight:bold; padding-left:21px; background:url(http://i40.tinypic.com/2mnrz3l.gif) 0px 50% no-repeat}
.subscribe form{margin:0; padding:0}
.related-posts{width:282px; float:right}
.related-posts p{margin:0}
.related-posts h3{margin:0; font-size:12pt; letter-spacing:0}
.related-posts li{background:url('http://i39.tinypic.com/2u5as1d.png') no-repeat center left; list-style-type:none; margin:0 0 5px; padding-left:20px}

Keterangan:
- #eee merupakan warna background dari kolom related post.
- width 534px adalah lebar kolom utama
- 43% adalah letak garis pemisah antara kolom feedburner dengan related post.
- width 250px adalah lebar kolom feed burner
- width 282px adalah lebar kolom related post
* silakan ganti sesuai lebar template anda masing-masing.

5. Kemudian cari lagi kode seperti ini
</head>

Copy kode di bawah ini lalu paste tepat di atas kode tadi.

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;

while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}

}
//]]>
</script>

6. Terakhir cari kode seperti ini
<data:post.body/>

atau

<p><data:post.body/></p>

Copy kode di bawah ini lalu paste tepat di bawah kode tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'><br/><br/>
<div class='related'>
<div class='subscribe'>
<p class='img'><a href="http://URL BLOG ANDA/feeds/posts/default">Subscribe via RSS Feed</a></p>
LETAKKAN KODE FORM FEED BURNER ANDA DISINI
</div>
<div class='related-posts'>
<h3>Related posts:</h3>
<li>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</li>
</div>
</div>
</b:if>

Keterangan:
- angka 5 yang berwarna merah menunjukkan jumlah artikel terkait yang ditampilkan.

7. Klik "Simpan".

Sekarang lihat apa yang telah anda lakukan pada template anda.hehe...Semoga bermanfaat...

 

It's Me

My Photo
Masda
Seorang blogger "KOTA GADIS" yang selalu penasaran dengan sesuatu hal yang baru. Belajar, belajar, dan terus belajar serta berusaha untuk menerapkannya. Karena menurut saya "Ilmu itu untuk diterapkan bukan untuk dipelajari".

Facebook Twitter
View my complete profile

Exchange Link

MasdaZine

Followers